<?php
	$css_list[0]['url'] = './tpl/css/article.css';
	$js_list[0] = './public/js/jquery.masonry.js';
?>
<!--{template inc/header_w}-->
<div class="main_body">
    
    <div class="cata cata1">
        {if !empty($tag_list)}
        <div class="i_tags">
            <h3><a href="javascript:;" class="current" onclick="showtags(0,this)" ><em class="ui"></em><b>全部</b></a></h3>
            <ul>
            <!--{loop $tag_list $tag}-->
                <li><a href="javascript:;" onclick="showtags({$tag['tag_id']},this)">{$tag['tag_name']}</a></li>
            <!--{/loop}-->
            </ul>
            <span class="tag-arrow"></span>
        </div>
        {/if}
        <div class="i_catas{if empty($tag_list)} i_catas2{/if}">
            <span class="j_prev ui" onclick="javascript:cata_slide(1, {$cate_id});"></span>
            <span class="j_next ui" onclick="javascript:cata_slide(-1, {$cate_id});"></span>
            <div class="j_list">
                <div id="cataSlide">
                    <ul id="tags">
                        <!--{loop $cates $item}-->
                        <li name="tag_{$item['tag_id']}"><a href="{if $item['cate_type'] == 0}{u article/index cate=$item['cate_id']}&anli={$item['anli']}{elseif $item['cate_type'] == 1}{u product/list cate=$item['cate_id']}{elseif $item['cate_type'] == 2}{u book/cate cate=$item['cate_code']}{elseif $item['cate_type'] == 3}{u shopinfo/index cate=$item['cate_id']}{/if}"{if $_GET['cate']==$item['cate_id']} class="current"{/if}>{$item['cate_name']}{if $item['hot'] == 1}<img src="/public/v1/img/hot.gif" class="hot"/>{/if}<img src="/public/v1/img/cata_icon{$item['cate_type']}{if ($item['cate_type'] == 3 && $item['is_personal'] == 1) || ($item['cate_type'] == 0 && $item['anli'] == 1)}_p{/if}.gif" /></a></li>
                        <!--{/loop}-->
                    </ul>
                </div>
                <p id="currpage" style="float:right;font-size:14px;"></p>
            </div>
        </div>

<script>
$(document).ready(function(){
    var unit_height=$('#cataSlide').height();
    var max_height=$('#cataSlide ul').height();
    window.pages = Math.ceil(max_height/unit_height);
    window.page = parseInt($.cookie('cate_{$cate_id}')) || 1;
    if($('#cataSlide ul .current').offset()) {
        var ds_height=$('#cataSlide ul .current').offset().top-$('#cataSlide ul').offset().top;
        window.page = Math.ceil(ds_height/unit_height);
        
        var top = (-window.page+1)*unit_height;
        $('#cataSlide ul').css('top',top+'px');
    } else if(window.page > 1) {
        var top = (-window.page+1)*unit_height;
        $('#cataSlide ul').css('top',top+'px');
    }
    $('#currpage').html(window.page+'/'+window.pages);
});

</script>

    </div>
    
    
    <div class="wf_filter">
        <a href="/product.php?action=list&cate={$cate_id}&order=sharenum" class="a1{if $orderkey=='sharenum'} current{/if}" title="按分享数从高到低">{if $orderkey=='sharenum'}分享数从高到低{else}分享数{/if}</a>
        <a href="/product.php?action=list&cate={$cate_id}&order=commentnum" class="a1{if $orderkey=='commentnum'} current{/if}" title="按评论数从高到低">{if $orderkey=='commentnum'}评论数从高到低{else}评论数{/if}</a>
        <div class="i_sele" id="selePrice">
            <a href="#" class="a1{if $orderkey=='pricedown' || $orderkey=='priceup'} current{/if}"><span{if $orderkey=='pricedown' || $orderkey=='priceup'} style="color:#f40;"{/if}>{if $orderkey=='priceup'}价格从低到高{elseif $orderkey=='pricedown'}价格从高到低{else}价格{/if}</span><em class="ui"></em></a>
            <div class="j_menu" id="selePriceMenu">
                <ul>
                    <li><a href="/product.php?action=list&cate={$cate_id}&order=priceup">价格从低到高</a></li>
                    <li><a href="/product.php?action=list&cate={$cate_id}&order=pricedown">价格从高到低</a></li>
                </ul>
            </div>
        </div>
        <form action="/product.php">
            <div class="i_price">
                <input type="text" name="minprice" class="j_ipt" size="4" value="{$minprice}" /> - <input type="text" name="maxprice" class="j_ipt" size="4" value="{$maxprice}" />
                <input type="submit" class="j_btn" value="确认" />
                <input type="hidden" name="action" value="list"/>
                <input type="hidden" name="cate" value="{$cate_id}"/>
                <input type="hidden" name="order" value="{$orderkey}"/>
            </div>
        </form>
        
        <span style="line-height:40px;padding-left:10px;">共计<span style="font-weight:bold;font-size:16px;">{$count}</span>个产品</span>
    </div>
    
    {if !empty($keywordsshow)}
    <div class="wf_filter_cat">
        <!--{loop $keywordsshow $v}-->
        <label><input type="checkbox" name="ids" class="j_check" onclick="gotourl()" value="{$v['id']}"{if $v['checked']} checked{/if}>{$v['keyword']}</label>
        <!--{/loop}-->
    </div>
    {/if}

    <div class="wf_list" id="wfContainer">
        {if !empty($product_list)}
        <!--{loop $product_list $item}-->
        <div class="item">
            <a href="{u product/show id=$item['id']}" target="_blank" class="a1">{if $item['is_qjd']}<span class="flagship"></span>{/if}<img src="{$item[img]}" class="wf_img" width="{$item[width]}" height="{$item[height]}" /></a>
            <div class="i_info">
                <a href="{u product/show id=$item['id']}">{$item[title]}</a>
                <div class="j_source">
                    {if $item['source']=='淘宝'}
                    <img src="/public/v1/img/icon_taobao.png">
                    {elseif  $item['source']=='亚马逊'}
                    <img src="/public/v1/img/icon_amazon.png">
                    {elseif  $item['source']=='jd'||$item['source']=='京东'}
                    <img src="/public/v1/img/icon_jd.png">
                    {elseif  $item['source']=='天猫'}
                    <img src="/public/v1/img/icon_tmall.png">
                    {else}
                    {$item['source']}
                    {/if}
                    <span class="k_price"><b style="color:#F30;">¥ {$item['price']}</b>{if $item['dj']}(定金){/if}</span>
                    <a href="javascript:;" onclick="addtocart({$item['id']},$(this))" class="g_btn">加入对比</a>
                    
                </div>
            </div>
        </div>
        <!--{/loop}-->
        {else}
        <div class="no_found">
            <div class="i_center"><img src="/public/v1/img/no_found.gif"><p>未找到相关信息</p></div>
        </div>
        {/if}
    </div>

    <div id="pbLoading" style="background:url(./tpl/images/loading.gif) no-repeat center center;height:52px; display:none;"></div>
</div>

<script>
function showtags(tagid,cobj) {
    $('#tags').children().each(function(index, obj){
        $(obj).attr('name') == 'tag_'+tagid || tagid == 0 ? $(obj).show() : $(obj).hide();
    });
    $('.i_tags a').removeClass('current');
    $(cobj).addClass('current');
}

{if !empty($product_list)}
$('#wfContainer').masonry({
    itemSelector: '.item',
    gutterWidth: 12
});
$(function(){
    

    $(window).resize(function() {
        resize_masonry();
    });

    resize_masonry();
    
    <!--{if $pager['page_count'] > 0}-->
	createPBScroll("{$pb_url}",appendShareItem,pbLoadingFun,2,{$_FANWE['setting']['share_pb_load_count']},300);
	<!--{/if}-->
});

function resize_masonry(){
    var max_width=$('#wfContainer').width();
    var col_num=max_width>1440?7:5;
    var min_gutter=12;
    var item_width=Math.floor((max_width-min_gutter*(col_num-1))/col_num)-2;
    $('#wfContainer .item').css('width',item_width);
    $('#wfContainer .item .wf_img').each(function(){
        var b=parseInt($(this).attr('width'))/parseInt($(this).attr('height'));
        var item_height=Math.floor(item_width/b);
        $(this).attr('width',item_width);
        $(this).attr('height',item_height);
    });
    $('#wfContainer').masonry( 'reload' );
}

function appendShareItem(result,index) {
	html = '<div>' + result + '</div>';
    html = $(html).find('.item');
    /*
	$(".book_img",html).each(function(){
		var oldWidth = parseInt(this.getAttribute("oldWidth"));
		var oldHeight = parseInt(this.getAttribute("oldHeight"));
		if(isNaN(oldWidth) || isNaN(oldHeight) || oldWidth == 0 || oldHeight == 0)
		{
			this.height = 0;
		}
		else
		{
			var scale = 257 / oldWidth;
			this.height = oldHeight * scale;
		}
	});
    */
	//$('#wfContainer').append(html).masonry('appended',html,true,function(){});
    $('#wfContainer').append(html);
    resize_masonry();
}

function pbLoadingFun(bln)
{
	if(bln)
		$("#pbLoading").show();
	else
		$("#pbLoading").hide();
}

function gotourl() {
    var url = '/product.php?action=list&cate={$cate_id}&order={$orderkey}&ids=';
    var b = true;
    $('input[name="ids"]').each(function(index, obj) {
        if(obj.checked == true) {
            url += (b ? '' : ',') + obj.value;
            b = false;
        }
    });
    location.href = url;
}

function addtocart(id,obj) {
    var ids = $.cookie('pids');
    var num = 0;
    if(ids) {
        idsarr = ids.split(',');
        num = idsarr.length;
        var b = false;
        for(var i = 0; i < idsarr.length; i++) {
            if(idsarr[i] == id) {
                b = true;
                break;
            }
        }
        if(!b) {
            ids += ',' + id;
            num++;
        }
    } else {
        ids = id;
        num = 1;
    }
    $('#mycartwrap').html('比价车('+num+')');
    $.cookie('pids', ids, {expires:7});
    //alert('加入比价车成功！');
    var offset = obj.offset();
    //console.log(offset.left+':'+offset.top);
    var cart_html='<div class="add_to_cart" id="cart_'+id+'" style="left:'+offset.left+'px;top:'+offset.top+'px"></div>';
    $("body").append(cart_html);
    var left=$(window).width()-200;
    $('#cart_'+id).animate({
        left:   left,
        top:    100
    }, 2000, 'linear',function(){
        $(this).remove();			
    });
}
{/if}
</script>
<!--{template inc/footer}-->